<template>
  <div class="app-container">
    <el-button type="text" @click="saveForm">添加教育经历</el-button>
    <ul class="levelOneList">
      <li
        v-for="_eduInfo in eduInfos"
        :key="_eduInfo.id">
        <p>
          <el-descriptions size="medium">
            <el-descriptions-item label="学校">{{ _eduInfo.university }}</el-descriptions-item>
            <el-descriptions-item label="专业"> {{ _eduInfo.major }} </el-descriptions-item>
            <el-descriptions-item label="学历"> {{ get_education(_eduInfo.education) }} </el-descriptions-item>
            <el-descriptions-item label="时间范围">
              {{ get_time(_eduInfo.beginTime) + ' ~ ' + get_time(_eduInfo.endTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button type="text" size="mini" @click="updateForm(_eduInfo.id)">修改</el-button>
              <el-button type="text" size="mini" @click="delete_eduInfo(_eduInfo.id)">删除</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </p>
      </li>
    </ul>

    <el-dialog :visible.sync="eduInfoFormVisible" title="">
      <el-form label-width="120px" style="width: 75%">
        <el-form-item label="学校">
          <el-input v-model="eduInfo.university"/>
        </el-form-item>

        <el-form-item label="专业">
          <el-input v-model="eduInfo.major"/>
        </el-form-item>

        <el-form-item label="学历">
          <el-select v-model="eduInfo.education" placeholder="请选择">
            <el-option :key="0" :value="0" label="小学"/>
            <el-option :key="1" :value="1" label="初中"/>
            <el-option :key="2" :value="2" label="高中"/>
            <el-option :key="3" :value="3" label="中专"/>
            <el-option :key="4" :value="4" label="本科"/>
            <el-option :key="5" :value="5" label="大专"/>
            <el-option :key="6" :value="6" label="硕士研究生"/>
            <el-option :key="7" :value="7" label="博士研究生"/>
          </el-select>
        </el-form-item>

        <el-form-item label="起始时间">
          <el-date-picker
            v-model="eduInfo.beginTime"
            type="datetime"
            placeholder="选择年月"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="eduInfo.endTime"
            type="datetime"
            placeholder="选择年月"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="eduInfoFormVisible = false">取 消</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import edu_info from '@/api/hr/edu_info'

export default {
  data() {
    return {
      eduInfo: {},
      eduInfos: {},
      edit: true,
      saveBtnDisabled: false,
      eduInfoFormVisible: false
    }
  },
  created() {
    this.get_eduInfos()
  },
  methods: {
    get_eduInfos() {
      edu_info.get_eduInfos().then(response => {
        this.eduInfos = response.data.eduInfos
      })
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true
      // eslint-disable-next-line eqeqeq
      if (this.edit == true) {
        this.update()
      } else {
        this.save()
      }
    },
    save() {
      edu_info.add_eduInfo(this.eduInfo).then(response => {
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.eduInfoFormVisible = false
        this.saveBtnDisabled = false
        this.get_eduInfos()
      }).catch(response => {
        this.$message({
          type: 'error',
          message: '添加失败'
        })
        this.saveBtnDisabled = false
      })
    },
    update() {
      edu_info.update_eduInfo(this.eduInfo).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.eduInfoFormVisible = false
        this.saveBtnDisabled = false
        this.get_eduInfos()
      }).catch(response => {
        this.$message({
          type: 'error',
          message: '修改失败'
        })
        this.saveBtnDisabled = false
      })
    },
    saveForm() {
      this.eduInfo = {}
      this.edit = false
      this.eduInfoFormVisible = true
    },
    updateForm(id) {
      edu_info.get_eduInfo(id).then(response => {
        this.eduInfo = response.data.eduInfo
      })
      this.edit = true
      this.eduInfoFormVisible = true
    },
    get_education(education) {
      switch (education) {
        case 0:
          return '小学'
        case 1:
          return '初中'
        case 2:
          return '高中'
        case 3:
          return '中专'
        case 4:
          return '本科'
        case 5:
          return '大专'
        case 6:
          return '硕士研究生'
        case 7:
          return '博士研究生'
      }
    },
    get_time(date) {
      if (date === undefined || date == null) { return '未知' }
      const splits = date.split(' ')
      return splits[0]
    },
    delete_eduInfo(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return edu_info.delete_eduInfo(id)
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.get_eduInfos()
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: response.data.message
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.levelOneList{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.levelOneList li{
  position: relative;
}
.levelOneList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.levelOneList .acts {
  float: right;
  font-size: 14px;
}
.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 200px;
  display: block;
}
</style>
